<template>
  <div class="search">
    <!-- 顶部导航 -->
    <mt-header class="mytitle" title="搜索中心">
      <div slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </div>
    </mt-header>
    <div class="body">
      <!-- search -->
      <div class="searchInfo">
        <input type="text" placeholder="搜索你喜欢的商品" v-model="searchData" @keydown.enter="searchBtn('searchlist')">
        <button class="search_btn" @click="searchBtn('searchlist')">搜索</button>
      </div>
      <!-- 搜索历史 -->
      <div class="old_search">
        <div class="title">
          <span>搜索历史</span>
          <div @click="clearAllSearch">
            <i class="iconfont icon-empty_fill"></i>
            <span>清空记录</span>
          </div>
        </div>
        <div class="old_search_list">
          <ul>
            <li v-for="(item ,index) in oldHistoryList" :key="index">
              <span>{{item}}</span>
              <i class="iconfont icon-delete_fill" @click="delOneSearch(index)"></i>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <tab-bar></tab-bar>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import {quertGoods} from '@/api'
import TabBar from '@/components/tab-bar'
export default {
  components: {
    TabBar
  },
  data () {
    return {
      searchData: '',
      historyList: [],
      queryInfo: {
        proName: '',
        page: 1,
        pageSize: 10
      },
      oldHistoryList: [],
      searchList: []
    }
  },
  methods: {
    // 点击搜索按钮
    searchBtn (name) {
      // 判断搜索框是否为空
      // 如果是 弹窗警告
      // 如果不是，追加信息+发送搜索请求
      if (!this.searchData) {
        Toast({
          message: '请输入关键词',
          duration: 1500
        })
      } else {
        // 把local中的搜索历史数组取出来
        let foundList = JSON.parse(localStorage.getItem('historyList'))
        // 如果找不到fondList,就创建一个空的数组
        if (!foundList) {
        // 把当前搜索的关键词追加到local中
          this.historyList.unshift(this.searchData)
          // 把添加新关键词的数组存入local中
          localStorage.setItem('historyList', JSON.stringify(this.historyList))
        } else {
          this.historyList = JSON.parse(localStorage.getItem('historyList'))
          this.historyList.unshift(this.searchData)
          // 把添加新关键词的数组存入local中
          localStorage.setItem('historyList', JSON.stringify(this.historyList))
        }
        // 添加后需要再次渲染
        this.renderHistoryList()
        this.queryInfo.proName = this.searchData
        // 发送搜索请求
        quertGoods(this.queryInfo)
          .then(res => {
            this.searchList = res.data
            localStorage.setItem('searchList', JSON.stringify(this.searchList))
            // 跳转到搜索列表页
            this.$router.push({name: name})
          })
      }
    },
    // 把local中的值赋值给data中的oldList变量 用来渲染页面
    renderHistoryList () {
      let oldList = JSON.parse(localStorage.getItem('historyList'))
      this.oldHistoryList = oldList
    },
    // 清空搜索历史
    clearAllSearch () {
      localStorage.setItem('historyList', [])
      this.oldHistoryList = []
      this.historyList = []
      this.renderHistoryList()
    },
    // 删除单个搜索记录
    delOneSearch (id) {
      let searchList = JSON.parse(localStorage.getItem('historyList'))
      searchList.map((res, index) => {
        if (id === index) {
          searchList.splice(index, 1)
        }
      })
      localStorage.setItem('historyList', JSON.stringify(searchList))
      this.renderHistoryList()
    }
  },
  created () {
    this.renderHistoryList()
  }
}
</script>
<style lang="scss" scoped>
  .search{
    .mytitle{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 45px;
      background-color: #006699;
      color: #fff;
      font-size: 16px;
      ::before{
        font-weight: 600;
        font-size: 20px
      }
    }
    .body{
      padding: 45px 0  50px 0;
      .searchInfo{
        padding: 10px;
        input{
          height: 28px;
          width: 278px;
          border: 1px solid #006699;
          padding-left: 10px;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
          outline:none;
        }
        .search_btn{
          background: #006699;
          color: #fff;
          padding: 8px 20px;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          border: none;
          margin-left: -12px;
          outline: none;
          font-size: 14px;
        }
      }
      .old_search{
        .title{
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #666;
        }
      }
      .old_search_list{
        padding: 10px;
        ul{
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          flex-wrap: wrap;
          li{
            width: 100%;
            margin: 5px 0;
            padding: 5px;
            border: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
</style>
